<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>消息</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/public.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/header.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/bottom.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/chat_news.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/jquery.emoji.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/renting/css/railscasts.css" />
    <style type="text/css">
        .imgtypecss{
            max-height: 50px;
            max-width: 50px;
        }
        .lastchat{
            color:#bdbdbd;
        }
        .usernamestyle{
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="nav">
            <a href="${pageContext.request.contextPath}/renting/index.jsp" class="nav_title">好客租房</a>
            <select class="select">
                <option value="重庆">重庆</option>
                <option value="贵阳">贵阳</option>
                <option value="重庆">重庆</option>
                <option value="贵阳">贵阳</option>
            </select>
            <ul class="nav_ul">
                <li><a href="${pageContext.request.contextPath}/renting/index.jsp">首页</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/Findroom.jsp">轻松找房</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/entry.jsp">房东入驻</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/chat_news.jsp" style="color: #2981c8;">消息</a></li>
                <li><a href="${pageContext.request.contextPath}/renting/pages/onther/login.jsp">登录</a></li>
            </ul>
            <img src="${pageContext.request.contextPath}/renting/img/icon/lianxi-1.png" class="nav_img">
            <p class="nav_phone">
                <span>13301131116</span>
                <span>13301131116</span>
            </p>
        </div>
    </div>
    <div class="content">
        <div class="content_title">
            <ul>
                <li>消息</li>
                <li>通知</li>
            </ul>
            <p><i id="callName"></i><span id="isHouse">认证房主</span></p>
        </div>
        <div class="news">
            <div class="news_list">
                <div class="talk_left">
                    <ul>
                    </ul>
                </div>
                <div class="talk_right">
                    <ul id="chatbox">

                    </ul>
                    <div class="talkonline">
                        <p>
                            <img src="${pageContext.request.contextPath}/renting/img/icon/biaoqing.png" class="biaoqing" id="btn">
                            <img src="${pageContext.request.contextPath}/renting/img/icon/changyongyu.png" class="changyong">
                            <img src="${pageContext.request.contextPath}/renting/img/icon/shouji.png" class="shouji">
                        </p>
                        <div id="editor" contenteditable="true" style="width: 850px;word-wrap: break-word;overflow: hidden;"></div>
                        <button type="button" class="sendNews">发送</button>
                        <div class="changyongyu">
                            <ul>
                                <li>好的，么么哒(づ￣ 3￣)づ</li>
                                <li>好的，么么哒(づ￣ 3￣)づ</li>
                                <li>好的，么么哒(づ￣ 3￣)づ</li>
                                <li>好的，么么哒(づ￣ 3￣)づ</li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <div class="notice">
                <ul>
                    <a href="">
                        <li>
                            <p>看房通知<span>2019-11-13 10:00</span></p>
                            <p>您预约的<i>2019-11-13</i>日下午<i>14：00-16:00</i>到<i>西科大道x西科公寓25栋10-09室看房</i>。房主已确认，请按时前往！<span>待查看</span></p>
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <p>看房通知<span>2019-11-13 10:00</span></p>
                            <p>您预约的<i>2019-11-13</i>日下午<i>14：00-16:00</i>到<i>西科大道x西科公寓25栋10-09室看房</i>。房主已确认，请按时前往！<span>已查看</span></p>
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <p>看房通知<span>2019-11-13 10:00</span></p>
                            <p>您预约的<i>2019-11-13</i>日下午<i>14：00-16:00</i>到<i>西科大道x西科公寓25栋10-09室看房</i>。房主已确认，请按时前往！<span>已查看</span></p>
                        </li>
                    </a>
                    <a href="">
                        <li>
                            <p>看房通知<span>2019-11-13 10:00</span></p>
                            <p>您预约的<i>2019-11-13</i>日下午<i>14：00-16:00</i>到<i>西科大道x西科公寓25栋10-09室看房</i>。房主已确认，请按时前往！<span>已查看</span></p>
                        </li>
                    </a>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="${pageContext.request.contextPath}/renting/js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/renting/js/highlight.pack.js"></script>
<script src="${pageContext.request.contextPath}/renting/js/jquery.emoji.min.js"></script>
<script src="${pageContext.request.contextPath}/renting/js/emoji.list.js"></script>
<script src="${pageContext.request.contextPath}/renting/js/chat_news.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/renting/js/header.js"></script>
<script src="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var login=sessionStorage.getItem("login");
    var url="";
    if(login==1){
        url="${pageContext.request.contextPath}/renting/pages/tenant/inspection.jsp";
    }
    if(login==2){
        url="${pageContext.request.contextPath}/renting/pages/landlord/release.jsp";
    }
    judge_login(url,"${pageContext.request.contextPath}/renting/pages/onther/login.jsp");
</script>
<script type="text/javascript">
    layui.use("layer",function (){
        var layer=layui.layer,
            $=layui.$;


    var loginsate = ${drom==null?1:0}
    if(loginsate==0){
        //获取聊天用户列表
        $.ajax({
            url:'${pageContext.request.contextPath}/message/loadchatlist',
            type:'post',
            async:false,
            dataType:'json',
            success:function (redata){
                if(redata.statecode==0){
                    for(var ia=0;ia<redata.data.length;ia++){

                        $(".talk_left ul").append("<li style='list-style: none;' rid="+redata.data[ia].rid+" uid="+redata.data[ia].userid+" landlordId="+redata.data[ia].landlordId+">"+
                            "<img class='imgtypecss' src='${pageContext.request.contextPath}/renting/img/${drom.vater==null?'touxiang.png':drom.vater}'>"+
                            "<p>"+
                            "<span class='usernamestyle'>"+redata.data[ia].name+"</span><i>"+dateToStr(redata.data[ia].time)+"</i><br>"+
                            "<d class='lastchat'>"+redata.data[ia].lastmsg+"</d>"+
                            "</p></li>")
                    }
                }
                console.log(redata);
            },
            error:function (e){
                console.log(e);
            }

        })

        //重新赋值点击事件
        $(".talk_left ul li").click(function(){
            for (var i = 0; i < $(".talk_left ul li").length; i++) {
                $(".talk_left ul li").eq(i).css("background-color","#FFF")
                $(".hide").removeClass("show");
            }
            $(this).css("background-color","#f2f8fc");
            $(".hide").eq($(this).index()).addClass("show");
            $(".content_title p i").text($(this).find("p").find("span").text())

            $("#chatbox").text("");
            //邦定聊天关系id
            $("#chatbox").attr("rid",$(this).attr("rid"));
            //获得点击用户名称
            $("#callName").text($(this).children().find("span").text());
            $.ajax({
                url:'${pageContext.request.contextPath}/message/getchatlistmsg',
                type:'post',
                async: false,
                data:{"rid":$(this).attr("rid")},
                dataType:'json',
                success:function (redate){
                    console.log(redate);

                    if(redate.statecode==0){
                        for(var ia=0;ia<redate.data.list.length;ia++){
                            if(redate.data.list[ia].userId!=${drom.rid==null?0:drom.rid}){//左边
                                $("#chatbox").append("<li><div>"+
                                    "<img style='float: left;margin-right: 5px;border-radius: 100%;height: 50px;width: 50px;' src='${pageContext.request.contextPath}/renting/img/${drom.vater==null?'touxiang.png':drom.vater}'>"+
                                    "<p style='float: left;height: 40px;line-height: 40px;background-color: #f2f8fc;border-radius: 3px;margin-top: 5px;padding: 0 10px;' class='chat_left_p'>"+redate.data.list[ia].content+"</p></div>"+
                                    "</li>");
                            }else{//右边
                                $("#chatbox").append("<li><div>"+
                                    "<img style='border-radius: 100%;height: 50px;width: 50px;' src='${pageContext.request.contextPath}/renting/img/${drom.vater==null?'touxiang.png':drom.vater}'>"+
                                    "<p>"+redate.data.list[ia].content+"</p></div></li>");
                            }
                        }
                    }else{
                        alert("未获取到信息哦");
                    }
                },
                error:function (e){
                    console.log(e)
                }
            })
        })

        //加载默认聊天关系
        $("#chatbox").attr("rid",$(".talk_left ul li:eq(0)").attr("rid"));
        $("#callName").text($(".talk_left ul li:eq(0) span").text());
        <%--alert("${msgId}")--%>
        // $(".talk_left ul li:eq(0)").attr("rid")

        let rid=$(".talk_left ul li:eq(0)").attr("rid");
        if(${msgId!=null}){
            rid=${msgId==null?0:msgId};
        }
        //加载默认聊天信息
        $.ajax({
            url:'${pageContext.request.contextPath}/message/getchatlistmsg',
            type:'post',
            async: false,
            data:{"rid":rid},
            dataType:'json',
            success:function (redate){
                console.log(redate);
                if(redate.statecode==0){
                    for(var ia=0;ia<redate.data.list.length;ia++){
                        if(redate.data.list[ia].userId!=${drom.rid==null?0:drom.rid}){//左边
                            $("#chatbox").append("<li><div>"+
                                "<img style='float: left;margin-right: 5px;border-radius: 100%;height: 50px;width: 50px;' src='${pageContext.request.contextPath}/renting/img/${drom.vater==null?'touxiang.png':drom.vater}'>"+
                                "<p style='float: left;height: 40px;line-height: 40px;background-color: #f2f8fc;border-radius: 3px;margin-top: 5px;padding: 0 10px;' class='chat_left_p'>"+redate.data.list[ia].content+"</p></div>"+
                                "</li>");
                        }else{//右边
                            $("#chatbox").append("<li><div>"+
                                "<img style='border-radius: 100%;height: 50px;width: 50px;' src='${pageContext.request.contextPath}/renting/img/${drom.vater==null?'touxiang.png':drom.vater}'>"+
                                "<p>"+redate.data.list[ia].content+"</p></div></li>");
                        }
                    }
                }else{
                    alert("未获取到信息哦");
                }
            },
            error:function (e){
                console.log(e)
            }
        })





        //发送按钮的实现
        $(".sendNews").click(function (){
            if($("#editor").text().trim().length<1){
                layer.msg("您未输入内容",{icon:2})
                return;
            }
            var rid = $("#chatbox").attr("rid");
            $(".talk_left ul li[rid="+rid+"]").children().find("d").text($("#editor").text());
            $.ajax({
                url:'${pageContext.request.contextPath}/message/addNewChatMsg',
                type:'post',
                async: false,
                data:{"rid":$("#chatbox").attr("rid"),"msg":$("#editor").text()},
                dataType:'json',
                success:function (redate){
                    console.log(redate);
                    $("#chatbox").append("<li><div>"+
                        "<img style='border-radius: 100%;height: 50px;width: 50px;' src='${pageContext.request.contextPath}/renting/img/${drom.vater==null?'touxiang.png':drom.vater}'>"+
                        "<p>"+$("#editor").text()+"</p></div></li>");
                    $("#chatbox").scrollTop(999999999);
                },
                error:function (e){
                    console.log(e)
                }
            })
        })
    }else{
        layer.msg("未登录用户无法使用聊天功能",{time:500});
        // alert("未登录用户无法使用聊天功能");
    }
    })


    function dateToStr(timestamp) {
        if(timestamp!=null){
            var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            Y = date.getFullYear() + '-';
            M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            D = date.getDate() + ' ';
            h = date.getHours() + ':';
            m = date.getMinutes();
            return Y+M+D+" "+h+m;
        }else{
            return "";
        }
    }





</script>
